import React, {Component} from 'react';
import {Link} from "react-router-dom";
import {connect} from "react-redux";
import {Icon, Menu} from 'antd';

const {SubMenu} = Menu;
const MyIcon = Icon.createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1290777_17g7h8j1k5d.js', // 在 iconfont.cn 上生成
});

class MenuL extends Component {
    
    // 一级子菜单key
    rootSubmenuKeys = ['menu1', 'menu2', 'menu3', 'menu4', 'menu5', 'menu6'];
    state = {
        openKeys: ['menu1'],
    };
    onOpenChange = openKeys => {
        const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
        if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            this.setState({openKeys});
        } else {
            this.setState({
                openKeys: latestOpenKey ? [latestOpenKey] : [],
            });
        }
    };
    
    render() {
        const {list} = this.props;
        return (
            <div className='menu-box'>
                {
                    this.props.loginStatusPages ?
                    <Link to={'/admin'} className='logo'>
                        <i className='iconfont logo-icon'>&#xe603;</i>
                        HOME FOR SMEs
                    </Link>
                    :
                    <Link to={'/'} className='logo'>
                        <i className='iconfont logo-icon'>&#xe603;</i>
                        HOME FOR SMEs
                    </Link>
                    
                }
                <div className='menu-main'>
                    <Menu
                        mode="inline"
                        openKeys={this.state.openKeys}
                        onOpenChange={this.onOpenChange}
                        defaultSelectedKeys={['']}
                        style={{}}
                    >
                        
                        {list.map((item) => {
                            return !item.get('menuSub').size
                                ?
                                <Menu.Item key={item.get('id')}>
                                    <Link to={item.get('path')}>
                                        <span>
                                            <MyIcon className='ant-icon' type={item.get('icon')}/>
                                            {item.get('title')}
                                        </span>
                                    </Link>
                                </Menu.Item>
                                :
                                <SubMenu
                                    key={item.get('id')}
                                    title={
                                        <span>
                                        <MyIcon className='ant-icon' type={item.get('icon')}/>
                                        <span>{item.get('title')}</span>
                                    </span>
                                    }
                                >
                                    {item.get('menuSub').map((itemSub) => {
                                        return (
                                            <Menu.Item key={itemSub.get('id')}>
                                                <Link to={itemSub.get('path')}>
                                                    <span>
                                                        {itemSub.get('title')}
                                                    </span>
                                                </Link>
                                            </Menu.Item>
                                        )
                                    })}
                                </SubMenu>
                        })
                        }
                    </Menu>
                </div>
            </div>
        );
    }
}

const mapState = (state) => ({
    list: state.getIn(['pages', 'menuList'])
});

export default connect(mapState, null)(MenuL);